<!DOCTYPE html>
<html lang="en">

  <!-- Do not use this HTML file as a start -->
  <!-- Always create your own HTML file and follow steps in basic usage section of documentation -->

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    

    <title> Image Gallery with Fullscreen Option | RoyalSlider Example</title>

    <meta content="Touch-enabled image gallery and content slider plugin, that focuses on providing great user experience on every desktop and mobile device." name="description">
    <meta name="keywords" content="content slider, gallery, plugin, jquery, banner rotator">
    <meta name="viewport" content="width = device-width, initial-scale = 1.0" />
    <meta name="author" content="Dmitry Semenov">

    <!-- slider JS files -->
    
    <script class="rs-file" src="../assets/royalslider/jquery-1.8.3.min.js"></script>
    <script class="rs-file" src="../assets/royalslider/jquery.royalslider.min.js"></script>
    <link class="rs-file" href="../assets/royalslider/royalslider.css" rel="stylesheet">
    
    

    
    <!-- syntax highlighter -->
    <script src="../assets/preview-assets/js/highlight.pack.js"></script>
    <script src="../assets/preview-assets/js/jquery-ui-1.8.22.custom.min.js"></script>
    <script> hljs.initHighlightingOnLoad();</script>


    

    <!-- preview-related stylesheets -->
    <link href="../assets/preview-assets/css/reset.css" rel="stylesheet">
    <link href="../assets/preview-assets/css/smoothness/jquery-ui-1.8.22.custom.css" rel="stylesheet">
    <link href="../assets/preview-assets/css/github.css" rel="stylesheet">

    <!-- slider stylesheets -->
    
     
        <link class="rs-file" href="../assets/royalslider/skins/default/rs-default.css" rel="stylesheet">
     
    

    
    <!-- slider css -->
    <style>
      #gallery-1 {
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;  
  user-select: none;
}

    </style>
    
    <style>
      #page-navigation { display: none; }
    </style>
  </head>
  <body >
  <header  id="main-header" class="clearfix">  
    <div  class="page wrapper"> 
       <div class="col span_6">
         <a id="logo" href="#">Royal&thinsp;Slider</a>
         <nav>
            <a href="http://dimsemenov.com/plugins/royal-slider/documentation/?s=dp">Documentation</a>
            <a href="http://dimsemenov.com/plugins/royal-slider/build/?s=dp">Build Tool</a>
            <a href="http://dimsemenov.com/private/forum.php">Support Forum</a>
            <a href="http://help.dimsemenov.com/discussions/suggestions">Request feature</a>
         </nav>
       </div>
    </div>
  </header>
  <div  class="page wrapper">    
    <div class="row clearfix">
      <div id="page-navigation" class="col span_6"> 
            
          <div class="left page-nav-item"> 
                  <a href="../visible-nearby/" title="Previous Example: 
  Gallery with Visible Nearby Images">← Gallery with Visible Nearby Images</a> 
          </div> 
           
           
          <div class="right page-nav-item"> 
          
                  <a href="../video-gallery/" title="Next Example: 
  Video Gallery">Video Gallery → </a> 
          
          </div> 
           
      </div> 
    </div>

    <!-- slider code start -->
      <div class="row clearfix"> 
   <div class="col span_2 example-info">
    <h2>Gallery with fullscreen</h2>
    <p>Automatically loads larger images in fullscreen, uses native browser fullscreen (if supported, it may be disabled).</p>
    <p>Keyboard arrow navigation is automatically added when fullscreen is entered (but you may enable it for normal state too).</p>
    <p>Thumbnails are dynamically resized via media queries on smaller screen size.</p>
    <p>Gallery keeps only a few images in DOM to save memory.</p>
    <!-- <a class="wp-how-to-video" href="http://youtu.be/S-VJs_cmjwU">See video about how to create such gallery in WordPress version</a> -->
  </div>
<div class="col span_4 fwImage">
  <div id="gallery-1" class="royalSlider rsDefault">
    <a class="rsImg bugaga" data-rsw="400" data-rsh="500"  data-rsBigImg="../img/paintings/1.jpg" href="../img/paintings/700x500/1.jpg">Vincent van Gogh - Still Life: Vase with Twelve Sunflowers<img width="96" height="72" class="rsTmb" src="../img/paintings/t/1.jpg" /></a>
    <a class="rsImg" data-rsw="632" data-rsh="500" data-rsBigImg="../img/paintings/2.jpg" href="../img/paintings/700x500/2.jpg">Vincent van Gogh - The Starry Night<img width="96" height="72" class="rsTmb" src="../img/paintings/t/2.jpg" /></a>
    <a class="rsImg" data-rsw="336" data-rsh="500" data-rsBigImg="../img/paintings/3.jpg" href="../img/paintings/700x500/3.jpg">Leonardo da Vinci - Mona Lisa<img width="96" height="72" class="rsTmb" src="../img/paintings/t/3.jpg" /></a>
    <a class="rsImg" data-rsw="417" data-rsh="500" data-rsBigImg="../img/paintings/4.jpg" href="../img/paintings/700x500/4.jpg">Grant DeVolson Wood - American Gothic<img width="96" height="72" class="rsTmb" src="../img/paintings/t/4.jpg" /></a>
    <a class="rsImg" data-rsw="601" data-rsh="500" data-rsBigImg="../img/paintings/5.jpg" href="../img/paintings/700x500/5.jpg">Rembrandt - The Night Watch<img width="96" height="72" class="rsTmb" src="../img/paintings/t/5.jpg" /></a>
    <a class="rsImg" data-rsw="350" data-rsh="500" data-rsBigImg="../img/paintings/6.jpg" href="../img/paintings/700x500/6.jpg">Johannes Vermeer - Girl with a Pearl Earring<img width="96" height="72" class="rsTmb" src="../img/paintings/t/6.jpg" /></a>
    <a class="rsImg" data-rsw="596" data-rsh="500" data-rsBigImg="../img/paintings/7.jpg" href="../img/paintings/700x500/7.jpg">Paul Cezanne - Card Players<img width="96" height="72" class="rsTmb" src="../img/paintings/t/7.jpg" /></a>
    <a class="rsImg" data-rsw="700" data-rsh="414" data-rsBigImg="../img/paintings/8.jpg" href="../img/paintings/700x500/8.jpg">Ilya Repin - Reply of the Zaporozhian Cossacks<img width="96" height="72" class="rsTmb" src="../img/paintings/t/8.jpg" /></a>
    <a class="rsImg" data-rsw="470" data-rsh="500" data-rsBigImg="../img/paintings/9.jpg" href="../img/paintings/700x500/9.jpg">Ivan Aivazovsky - Chesmabattle<img width="96" height="72" class="rsTmb" src="../img/paintings/t/9.jpg" /></a>
    <a class="rsImg" data-rsw="500" data-rsh="500" data-rsBigImg="../img/paintings/10.jpg" href="../img/paintings/700x500/10.jpg">Gustav Klimt - The Kiss<img width="96" height="72" class="rsTmb" src="../img/paintings/t/10.jpg" /></a>
     <a class="rsImg" data-rsw="700" data-rsh="475" data-rsBigImg="../img/paintings/11.jpg" href="../img/paintings/700x500/11.jpg">Ivan Shishkin - Morning in a Pine Forest<img width="96" height="72" class="rsTmb" src="../img/paintings/t/11.jpg" /></a>
  </div>
</div>
</div>

  <!-- You don't need this part of code -->
  <div class="row clearfix">
    <h2>Markup for current slider</h2>
    <p style="max-width: 500px;">For better understanding please don't use this HTML file as a starter file, create your own and follow steps in <a href="http://dimsemenov.com/plugin/royal-slider/documentation/">basic usage section</a> of documentation </p>
    <div class="tabs col span_6">
    <ul>
        <li><a href="#js">JavaScript</a></li>
        <li><a href="#css">CSS</a></li>
        <li><a href="#html">HTML</a></li>
        <li><a href="#files">Files to include</a></li>
    </ul>
    <div id="js"><p>Slider JavaScript initialization code.</p><pre><code></code></pre></div>
    <div id="css"><p>Additional CSS styles for current slider.</p><pre><code>#gallery-1 {
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;  
  user-select: none;
}
</code></pre></div>
    <div id="html"><p>HTML markup of slider.</p><pre id="html-code"><code></code></pre></div>
    <div id="files"><p>You should include: jQuery, main slider JavaScript file, main slider CSS file, skin CSS file. <br/>It's recommended to get jquery.royalslider.min.js from build tool. Feel free to combine files in one.<br/>Make sure that paths match locations of files.</p><pre><code></code></pre></div>
    </div>
  </div>
  <script>
    jQuery(document).ready(function($) {
      // DO NOT INCLUDE THIS CODE IN YOUR BUILD, it's for tabs on this page
        var code = $('#html-code code');
        if(code.is(':empty')) {
          var rsCode = $('.royalSlider-preview');
          if(!rsCode.length) {
              rsCode = $('.royalSlider');
          }
          rsCode = rsCode.clone().removeClass('royalSlider-preview').wrap('<div></div>').parent().html();
          rsCode = htmlencode(rsCode);
          code.html(rsCode);
        }
        $('#js code').html( htmlencode($('#addJS').html()) );

        var filesHTML = '';
        $('.rs-file').each(function() {
          var item = $(this).removeAttr('class');
          if(item.is('script')) {
            filesHTML += '<script src="' + item.attr('src') + '" />';
          } else {
            filesHTML += $('<div>').append( $(this).clone().removeAttr('class') ).html();
          }
          filesHTML += "\n";
        });
        $('#files code').html( htmlencode( filesHTML ) );
        $( ".tabs" ).tabs();
    });
    function htmlencode(str) {
      if(str) {
         return str.replace(/[&<>"']/g, function($0) {
            return "&" + {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"}[$0] + ";";
        });
      }
    }   
  </script>
  <div class="row clearfix">
    <h2>List of Starter Templates</h2>
  <ul id="templates-list" class="col span_6">
  
  <li><a href="../content-slider/"><img width="341" height="250" src="../img/previews/content-slider.jpg" /><h3>HTML Content Slider</h3></a></li>
  
  <li><a href="../video-gallery/"><img width="341" height="250" src="../img/previews/video-gallery.jpg" /><h3>Video Gallery</h3></a></li>
  
  <li><a href="../gallery/"><img width="341" height="250" src="../img/previews/gallery.jpg" /><h3>Image Gallery with Fullscreen Option</h3></a></li>
  
  <li><a href="../visible-nearby/"><img width="341" height="250" src="../img/previews/visible-nearby.jpg" /><h3>Gallery with Visible Nearby Images</h3></a></li>
  
  <li><a href="../animated-blocks/"><img width="341" height="250" src="../img/previews/animated-blocks.jpg" /><h3>Slider with Animated Blocks</h3></a></li>
  
  <li><a href="../full-width/"><img width="341" height="250" src="../img/previews/fullwidth.jpg" /><h3>Full Width Slider</h3></a></li>
  
  <li><a href="../slider-in-lightbox/"><img width="341" height="250" src="../img/previews/lightbox.jpg" /><h3>Slider in Lightbox</h3></a></li>
  
  <li><a href="../simple-vertical/"><img width="341" height="250" src="../img/previews/simple-vertical.jpg" /><h3>Simple Vertical Slider</h3></a></li>
  
  <li><a href="../gallery-vertical-fade/"><img width="341" height="250" src="../img/previews/gallery-fade.jpg" /><h3>Gallery with Fade and Vertical Thumbs</h3></a></li>
  
  <li><a href="../slider-in-laptop/"><img width="341" height="250" src="../img/previews/slider-in-laptop.jpg" /><h3>Slider in Laptop</h3></a></li>
  
  <li><a href="../gallery-with-deeplinking/"><img width="341" height="250" src="../img/previews/deeplinking.jpg" /><h3>Gallery with Deep Linking</h3></a></li>
  
  </ul>
</div>
  <footer class="row clearfix" id="main-footer">
    <div class="col span_6">
      <nav><a href="http://dimsemenov.com/subscribe.html?s=sb">Email Newsletter</a><a href="http://twitter.com/dimsemenov">Twitter</a><a href="mailto:diiiimaaaa@gmail.com?subject=RoyalSlider bug">Report Bug</a><a href="http://dimsemenov.com/plugins/royal-slider/support/">Contact support</a></nav>
      <p class="copy">© 2011-2012 <a href="http://dimsemenov.com">Dmitry Semenov</a></p>
    </div>
  </footer>
   <!-- tabs & footer end /// --> 
   
  
    <script id="addJS">jQuery(document).ready(function($) {
  $('#gallery-1').royalSlider({
    fullscreen: {
      enabled: true,
      nativeFS: true
    },
    controlNavigation: 'thumbnails',
    autoScaleSlider: true, 
    autoScaleSliderWidth: 960,     
    autoScaleSliderHeight: 850,
    loop: false,
    imageScaleMode: 'fit-if-smaller',
    navigateByClick: true,
    numImagesToPreload:2,
    arrowsNav:true,
    arrowsNavAutoHide: true,
    arrowsNavHideOnTouch: true,
    keyboardNavEnabled: true,
    fadeinLoadedSlide: true,
    globalCaption: true,
    globalCaptionInside: false,
    thumbs: {
      appendSpan: true,
      firstMargin: true,
      paddingBottom: 4
    }
  });
});
</script>
  
  </div>
  </body>
</html>
